<template>
    <div id="fogetstep">
      <el-steps :active=step>
        <el-step title="输入账号" description="输入手机/邮箱"></el-step>
        <el-step title="验证身份" description="获取验证码"></el-step>
        <el-step title="设置密码" description="设置新密码"></el-step>
        <el-step title="完成" description="密码修改完成"></el-step>
      </el-steps>

      <el-form ref="form" :model="form" label-width="80px">
        <div>
          <div v-show="this.step<2">
            <el-form-item v-show=isphone  label="账号">
              <el-input type="phone" v-model="form.phone" :disabled=isdisabled placeholder="手机号"></el-input>
              <el-link :disabled=isdisabled @click="tranferzh">切换邮箱账号</el-link>
            </el-form-item>
            <el-form-item v-show=!isphone label="账号">
              <el-input type="email" v-model="form.email" :disabled=isdisabled placeholder="邮箱"></el-input>
              <el-link :disabled=isdisabled @click="tranferzh">切换手机账号</el-link>
            </el-form-item>
          </div>
          <el-form-item label="验证码" v-show="this.step===1">
            <el-input v-model="form.penum" placeholder="请输入"></el-input>
            <el-button @click="getIsemail" type="primary" :disabled=isTime v-text="isTime ? time  : '获取验证码'"></el-button>
          </el-form-item>
        </div>
        <el-form-item label="密码" v-show="this.step===2">
          <el-input type="password" v-model="form.pwd" placeholder="请输入6-15位字符"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" v-show="this.step===2">
          <el-input type="password" v-model="form.pwdagin" placeholder="请再次输入密码"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button v-show="this.step===2" @click="sumbitstep" type="primary">确认</el-button>
          <el-button v-show="this.step<=1" type="primary" @click="nextstep">下一步</el-button>
        </el-form-item>
        <el-link v-show="this.step===3"  @click="gotohome">回到首页</el-link>

      </el-form>
    </div>
</template>

<script>
    export default {
      name: "ForgetPwd",
      data() {
        return {
          form: {
            phone: '',
            email: '',
            penum: '',
            pwd: '',
            pwdagin: ''
          },
          isphone: true,
          step: 0,
          isuid: '',
          msg: '',
          isdisabled: false,
          isTime:false,
          time: '',
        }
      },
      methods: {
        //更换是邮箱还是手机
        tranferzh () {
          this.isphone = !this.isphone
        },
        nextstep () {
          //判断账号
          if (this.step === 0) {
            if (this.isphone){
              const myphone = /^[1][3,4,5,7,8][0-9]{9}$/;
              if( !myphone.test(this.form.phone) ){
                this.$message.error("手机号有误")
              }else {
                this.msg = this.form.phone
              }
            }else {
              this.msg = this.form.email
            }
            if (this.msg!==''){
              this.$http({
                method: 'post',
                url: '/user/findUserByMsg/'+this.msg,
              }).then(res => {
                if (res.data === '') {
                  this.$message.error("账号不存在")
                  this.form.email = ''
                  this.form.phone = ''
                  this.msg = ''
                } else {
                  this.isuid = res.data
                  this.isdisabled = true
                  this.step++
                }
                console.log(res);
              }).catch(err => {
                console.log(err);
              })
            }
          }
          //获取验证码
          if (this.step === 1) {
            if (this.form.penum !== '') {
              if (this.form.phone !== '') {
                this.$http({
                  url: '/checkPhoneNums/'+this.form.penum+'/'+this.form.phone,
                }).then(res => {
                  if (res.data) {
                    this.step++
                  } else {
                    this.$message.error("验证码输入错误")
                  }
                }).catch(err => {
                  console.log(err);
                })
              } else {
                this.$http({
                  method: 'post',
                  url: '/checkEmailNumber/' + this.form.penum,
                }).then(res => {
                  if (res.data) {
                    this.step++
                  } else {
                    this.$message.error("验证码输入错误")
                  }
                })
              }
            } else {
              this.$message.error("请输入验证码")
            }
          }
        },
        //更改密码
        sumbitstep () {
            const reg = /^[\w]{6,15}$/i
            const reg1 = /[a-zA-Z]/
            const reg2 = /[0-9]/
            if (!reg.test(this.form.pwd)) {
              this.$message.error("密码格式不正确")
            }else {
              if (this.form.pwdagin === '') {
                this.$message.error("请再次输入密码")
              } else if (this.form.pwdagin !== this.form.pwd) {
                this.$message.error("两次输入密码不一致")
              }else {
                this.$http({
                  method: 'post',
                  url: '/user/forgetPwd/'+this.isuid,
                  data: this.form.pwdagin
                }).then(res => {
                  this.step++
                }).catch(err => {
                  console.log(err);
                })
              }
            }

        },
        //倒计时
        getCodeTime() {
          this.isTime = true
          let time = 60000;
          let aa = setInterval(()=> {
            const second = Math.floor(time / 1000 % 60);
            this.time=second +  's'
            time -= 1000;
            if (time === -1000) {
              clearTimeout(aa)
              this.isTime = false
            }
          }, 1000)
        },
        //点击发送验证码
        getIsemail () {
          this.getCodeTime()
          //phone为空，就是发送邮箱
          if (this.form.phone ===''){
            //发送邮箱
            this.$http({
              url: '/sendEmail/'+this.form.email
            }).then(res=>{
              this.$message('发送成功，请注意查收');
            }).catch(err=>{
              alert("发送失败")
            })
          }else {
            //发送手机
            this.$http({
              url: '/send/'+this.form.phone
            }).then(res=>{
              this.$message('发送成功，请注意查收');
            }).catch(err=>{
              alert("发送失败")
            })
          }
        },
        //点击返回首页
        gotohome () {
          this.$router.push('/home')
        }
      }
    }
</script>

<style scoped>
  #fogetstep{
    width: 500px;
    background-color: #ffffff;
    margin: 50px auto;
    padding: 60px;
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  }
  /deep/ .el-form{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  /deep/ .el-form-item__content{
    text-align: left;
  }
  /deep/ .el-input{
    width: 50%;
  }
</style>
